<template>
  <view class="page">
    <view class="search-bar">
      <input class="ipt" v-model.trim="keyword" placeholder="输入分类或关键字" @confirm="doSearch" />
      <button class="btn" @click="doSearch">搜索</button>
    </view>
    <view class="result">
      <view class="item" v-for="b in list" :key="b.id" @click="goDetail(b.id)">
        <image :src="b.cover || '/static/img/default-item.png'" class="thumb" mode="aspectFill"></image>
        <view class="meta">
          <text class="title">{{ b.name }}</text>
          <text class="author">{{ b.author || '未知作者' }}</text>
        </view>
      </view>
      <view class="empty" v-if="!loading && list.length===0">暂无结果</view>
      <view class="loading" v-if="loading">加载中...</view>
    </view>
  </view>
</template>

<script>
import { myRequest } from '@/util/request.js';

export default {
  name: 'SearchPage',
  data() {
    return {
      keyword: '',
      list: [],
      loading: false
    }
  },
  methods: {
    async doSearch() {
      if (!this.keyword) {
        this.list = [];
        return;
      }
      try {
        this.loading = true;
        // 简化处理：将关键字当分类筛选
        const data = await myRequest({ url: `/api/books?page=1&pageSize=50&category=${encodeURIComponent(this.keyword)}` });
        this.list = Array.isArray(data.list) ? data.list : [];
      } catch (e) {
        console.error('搜索失败', e);
      } finally {
        this.loading = false;
      }
    },
    goDetail(id) {
      uni.navigateTo({ url: `/pages/bookInfo/bookInfo?id=${id}` });
    }
  }
}
</script>

<style scoped>
.page { padding: 20rpx; }
.search-bar { display: flex; gap: 16rpx; }
.ipt { flex: 1; height: 72rpx; background: #fff; border-radius: 12rpx; padding: 0 20rpx; }
.btn { width: 160rpx; height: 72rpx; line-height: 72rpx; text-align: center; border-radius: 12rpx; background: #3E88F0; color: #fff; }
.result { display: flex; flex-direction: column; gap: 16rpx; margin-top: 20rpx; }
.item { display: flex; gap: 16rpx; background: #fff; border-radius: 12rpx; padding: 16rpx; align-items: center; }
.thumb { width: 120rpx; height: 160rpx; border-radius: 10rpx; background: #f5f5f5; }
.meta { display: flex; flex-direction: column; gap: 6rpx; }
.title { font-size: 30rpx; color: #333; font-weight: 600; }
.author { font-size: 24rpx; color: #999; }
.loading, .empty { text-align: center; color: #999; padding: 20rpx 0; }
</style>

